<template>
  <div class="loading" v-if="showLoading" :style="style">
    <div class="loader">
      <svg class="circular" viewBox="25 25 50 50">
        <circle
          class="path"
          cx="50"
          cy="50"
          r="20"
          fill="none"
          stroke-width="5"
          stroke-miterlimit="10"
        ></circle>
      </svg>
    </div>
  </div>
</template>
<script>
export default {
  name: "loading",
  props: {
    loading: {
      type: Boolean,
      default: false,
    },
    color: {
      type: String,
      default: "#fff",
    },
    background: {
      type: String,
      default: "rgba(255, 255, 255, 0.9)",
    },
  },
  computed: {
    showLoading: {
      get() {
        return this.loading;
      },
      set(val) {
        this.$emit("update:loading", val);
      },
    },
    style() {
      return this.background ? `background-color:${this.background}` : "";
    },
  },
  methods: {
    init() {},
  },
  components: {},
  created() {},
  mounted() {
    this.init();
  },
};
</script>
<style lang="scss" scoped>
.loading {
  position: absolute;
  left: 50%;
  top: 50%;
  // background-color: rgba(55, 55, 55, 0.1);
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
}
.loader {
  width: 60px;
  height: 60px;
  position: relative;
  margin: 0 auto;
  .circular {
    animation: rotate 2s linear infinite;
    height: 100%;
    transform-origin: center center;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
  svg:not(:root) {
    overflow: hidden;
  }
  .path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation: dash 2.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: round;
  }
}

@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 59, 200;
    stroke-dashoffset: -55;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
  }
}
@keyframes color {
  0%,
  100% {
    stroke: $mainColor;
  }
  //   0%,
  //   100% {
  //     stroke: #2d8cf0;
  //   }
  //   40% {
  //     stroke: #ffffff;
  //   }
  //   66% {
  //     stroke: #f90;
  //   }
  //   80%,
  //   90% {
  //     stroke: #ed4014;
  //   }
}
</style>
